<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="~{/commons/common::headBar}"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="~{/commons/common::sideBar(active='exam.html')}"></div>
        <input type="hidden" name="username" th:value="${session.loginUser}"/>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2>试卷详情页</h2>
            <input type="hidden" name="examId" th:value="${examId}">
            <ol>
                <li th:each="quvo:${quVOList}">
<!--                    <input type="hidden" name="quId" th:value="${quvo.getId()}">-->
                    <div class="row-fluid">
                        <span th:switch="${quvo.getQuType()}">
                            <span class="logo" th:case='1'>
                                (判断题)
                            </span>
                            <span class="logo" th:case='2'>
                                (单选题)
                            </span>
                            <span class="logo" th:case='3'>
                                (多选题)
                            </span>
                            [[${quvo.getContent()}]]([[${quvo.getScore()}]]分)
                        </span>
                    </div>
                    <ol type="A">
                        <li class="quAnswer" th:each="quAnswer:${quvo.getQuAnswerList()}">
                            <input type="hidden" class="quId" name="quId" th:value="${quAnswer.getQuId()}">
                            <input required th:name="option+${quAnswer.getQuId()}" class="option" th:type="${quvo.getQuType()}==3?'checkbox':'radio'" th:value="${quAnswer.getId()}"/>
                            [[${quAnswer.content}]]
                        </li>
                    </ol>
                    <hr/>
                </li>
            </ol>
            <button type="button" class="btn btn-success mySubmit">完成</button>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<!--<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>-->
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript">
    //拼装json字符串
    var listObj;
    document.querySelector('.mySubmit').addEventListener('click',function () {
        var username = $("[name='username']").val();
        var examId = $("[name='examId']").val();
        var quIdList = document.querySelectorAll('.quId');
        var options = document.querySelectorAll('.option');
        var arr = new Array();
        for(i in options){
            if(options[i].checked){
                list={
                    "quId":quIdList[i].value,
                    "quAnswerId":options[i].value
                }
                arr.push(list);
            }
        }
        console.log(arr);
        listObj = {"examId":examId,"name":username,"quAnswerList": arr};
        console.log(listObj);
        saveAlbumJson();
    })
    var saveAlbumJson = function () {
        $.ajax(
            {
                url: "/test/submit",
                type: "POST",
                contentType: "application/json",
                dataType:"json",
                data: JSON.stringify(listObj),
                success: function (data) {
                    if(data.code == '200') {
                        window.location.href = data.net;
                    }
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err);
                }
            });
    }
</script>
</body>

</html>